<template>
  <div class="attendanceTimes">
    <s-title text="事项办理到场次数" />
    <div id="attendanceTimesChart"></div>
  </div>
</template>

<script>
import Highcharts from "highcharts/highstock";
import Highcharts3D from "highcharts/highcharts-3d";
Highcharts3D(Highcharts);
import sTitle from "../../common/sTitle.vue";
import axios from "axios";
export default {
  name: "attendanceTimes",
  components: {
    sTitle,
  },
  data() {
    return {
      list: [
        {
          name: "龙城镇",
          value: 10,
        },
        {
          name: "黄口镇",
          value: 20,
        },
        {
          name: "杨楼镇",
          value: 64,
        },
        {
          name: "刘套镇",
          value: 44,
        },
        {
          name: "马井镇",
          value: 44,
        },
        {
          name: "丁里镇",
          value: 44,
        },
      ],
      colorList: ["#f36c6c", "#e6cf4e", "#20d180", "#0093ff"],
    };
  },
  mounted() {
    let colors = ["#00c8ff", "#36e7fa", "#0064ff", "#0086ff", "#00a4ff"];
    axios.get(this.$serverIp + "getThingScene").then((res) => {
      this.list = [];
      for (let i = 0; i < res.data.length; i++) {
        this.list.push({
          name: res.data[i].mc,
          y: res.data[i].sl,
          color: colors[i % 5],
        });
      }

      this.setEchartHandle();
    });
  },
  methods: {
    setEchartHandle() {
      let _hcharts = Highcharts.chart("attendanceTimesChart", {
        chart: {
          type: "pie",
          backgroundColor: "rgba(0,0,0,0)",
          options3d: {
            enabled: true,
            alpha: 50,
            beta: 0,
          },
        },
        tooltip: {
          pointFormat: "{point.percentage:.1f}%</b>",
        },
        plotOptions: {
          pie: {
            allowPointSelect: true,
            cursor: "pointer",
            depth: 35,
            dataLabels: {
              enabled: true,
              formatter: function () {
                if (this.point.name == "0次") {
                  return (
                    '<span style="color: #00AEFF;font-size:14px">' +
                    this.point.name +
                    ' </span><br><p style="color: #00AEFF;font-size:14px">' +
                    Highcharts.numberFormat(this.percentage, 2) +
                    "%" +
                    "</p>"
                  );
                } else if (this.point.name == "1次") {
                  return (
                    '<span style="color: #2EF7E1;font-size:14px">' +
                    this.point.name +
                    ' </span><br><p style="color: #2EF7E1;font-size:14px">' +
                    Highcharts.numberFormat(this.percentage, 2) +
                    "%" +
                    "</p>"
                  );
                } else if (this.point.name == "1次以上") {
                  return (
                    '<span style="color: #2450F5;font-size:14px">' +
                    this.point.name +
                    ' </span><br><p style="color: #2450F5;font-size:14px">' +
                    Highcharts.numberFormat(this.percentage, 2) +
                    "%" +
                    "</p>"
                  );
                }
              },
            },
          },
        },
        series: [
          {
            type: "pie",
            data: this.list,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
.attendanceTimes {
}
#attendanceTimesChart {
  width: 90%;
  margin: auto;
  height: 26vh;
  margin-top: 10px;
}
</style>
 